<template>
  <div ref="mapRef" class="map-container">我是地图</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// 引入中国地图JSON数据
import chinaMap from "./china.json";
// 获取DOM元素
const mapRef = ref();
// 注册中国地图
echarts.registerMap("china", chinaMap as any);
onMounted(() => {
  const myEchart = echarts.init(mapRef.value);
  myEchart.setOption({
    // 地图组件
    geo: {
      map: "china", // 使用 registerMap 注册的地图名称，必填，不然报错
      show: true, // 是否显示地理坐标系组件
      zoom: 1.4, // 组件的缩放 >1 放大，<1 缩小
      top: 190,
      label: {
        show: true, // 地图上的文字显示出来
        // postion: ["50%", "50%"],
        color: "white",
        fontSize: 14,
      },
      itemStyle: {
        // 地图中每一块的样式
        areaColor: "#032654",
        
      },
      emphasis: {
        itemStyle: {
          color: "lightgreen",
        },
        label: {
          show: true,
          color: "white",
          fontSize: 20,
        },
      },
    },
    series: [
      {
        type: "lines", //航线系列
        polyline: false, // 是否是多段连线
        data: [
          {
            coords: [
              // 航线的起始点数据
              [116.405285, 39.904989], // 起点
              [125.3245, 43.886841], // 终点
            ],
          },
          {
            coords: [
              // 航线的起始点数据
              [116.405285, 39.904989], // 起点
              [87.617733, 43.792818], // 终点
            ],
          },
        ],
        effect: {
          // 两点之间线的动画特效
          show: true,
          color: "white",
          symbol: "triangle", // 特效图形的形状
          symbolSize: 10, // 特效图形的大小
        },
        lineStyle: {
          // 航线的样式
          color: "white",
          width: 2,
          curveness: 0.3, // 线的弯曲程度 当 polyline: true 无效
        },
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.map-container {
  flex: 2.5;
  width: 100%;
  height: 500px;
}
</style>
